<template>
  <router-view />
</template>

<script setup lang="ts">
  import { watchEffect } from 'vue';
  import { Dark, setCssVar, colors, useQuasar } from 'quasar';

  import { useSettingStore } from './stores';
  import iconMap from './icons';

  defineOptions({ name: 'App' });

  // 映射图标
  // https://quasar.dev/vue-components/icon#custom-mapping
  const $q = useQuasar();
  $q.iconMapFn = (iconName) => {
    const icon = iconMap[iconName];
    if (icon !== void 0) {
      return { icon: icon };
    }
  };

  //主题颜色
  const setting = useSettingStore();
  watchEffect(() => {
    // 修改主题
    if (setting.theme === 'system') Dark.set('auto');
    else Dark.set(setting.theme === 'dark');

    // 改变主题颜色
    const { lighten } = colors;
    // 深色主题让主颜色变暗30%
    if (Dark.isActive) setCssVar('primary', lighten(setting.themeColor, -30));
    else setCssVar('primary', setting.themeColor);
  });
</script>
